<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <title>查看资料</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="__CSS__/oksub.css">
    <script type="text/javascript" src="__LIB__/loading/okLoading.js"></script>
</head>
<body>
<div class="ok-body">
    <div class="layui-card layui-card-body ibms-card">
        <table class="layui-hide" id="icafeTable" lay-filter="icafeTable"></table>
    </div>
    <div class="layui-tab layui-tab-brief">
        <ul class="layui-tab-title">
            <li class="layui-this">外网：专线</li>
            <li>外网：ADSL</li>
            <li>净网先锋</li>
            <li>端口镜像</li>
        </ul>
        <div class="layui-tab-content">
            <div class="layui-tab-item layui-show">
                <table class="layui-hide" id="wanTable" lay-filter="wanTable"></table>
            </div>
            <div class="layui-tab-item">
                <table class="layui-hide" id="adslTable" lay-filter="adslTable"></table>
            </div>
            <div class="layui-tab-item">
                <table class="layui-table layui-text">
                    <tbody>
                    <tr>
                        <td class="layui-table-header" style="width: 16%;">网吧编码</td>
                        <td id="cnk_cnkid" style="width: 34%;"></td>
                        <td class="layui-table-header" style="width: 16%;">校验码</td>
                        <td id="cnk_checkcode" style="width: 34%;"></td>
                    </tr>
                    <tr>
                        <td class="layui-table-header">终端数量</td>
                        <td id="cnk_pc_conut"></td>
                        <td class="layui-table-header">法人代表</td>
                        <td id="cnk_legal"></td>
                    </tr>
                    <tr>
                        <td class="layui-table-header">负责人</td>
                        <td id="cnk_incharge"></td>
                        <td class="layui-table-header">负责人电话</td>
                        <td id="cnk_cellphone"></td>
                    </tr>
                    </tbody>
                </table>
            </div>
            <div class="layui-tab-item">
                <table class="layui-table layui-text">
                    <tbody>
                    <tr>
                        <td class="layui-table-header" style="width: 18%;">镜像设备IP地址</td>
                        <td id="mirror_device_ip" colspan="3"></td>
                    </tr>
                    <tr>
                        <td class="layui-table-header" style="width: 18%;">用户名</td>
                        <td id="mirror_device_username" style="width: 32%;"></td>
                        <td class="layui-table-header" style="width: 18%;">密码</td>
                        <td id="mirror_device_password" style="width: 32%;"></td>
                    </tr>
                    <tr>
                        <td class="layui-table-header">源端口</td>
                        <td id="mirror_source"></td>
                        <td class="layui-table-header">目的端口</td>
                        <td id="mirror_destination"></td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
<!--js逻辑-->
<script src="__LIB__/layui/layui.js"></script>
<script>
    layui.use(["element", "jquery", "table"], function () {
        let $ = layui.jquery;
        let table = layui.table;
        okLoading.close();

        // 表单赋值：parent.rowData为父页面传过来的行数据
        let initData = JSON.parse(JSON.stringify(parent.rowData));

        // 渲染：icafe表格
        let icafeArr = [];
        icafeArr.push(initData);
        let icafeTable = table.render({
            elem: '#icafeTable',
            data: icafeArr,
            size: "sm",
            cols: [[
                {field: "name", title: "场所名称", width: 110},
                {field: "contact", title: "联系人", width: 90},
                {field: "cellphone", title: "联系电话", width: 105},
                {field: "area", title: "地区", width: 240, templet: "#areaTpl"},
                {field: "address", title: "详细地址"},
            ]],
            done: function (res, curr, count) {
                // console.info(res, curr, count);
            }
        });

        // 渲染：wan表格
        let wanTable = table.render({
            elem: '#wanTable',
            url: "{:url('icafeWan/getTableData')}",
            where: {"icafe_id": initData.id},
            limit: 5,
            limits: [5],
            page: true,
            size: "sm",
            cols: [[
                {field: "isp_id", title: "运营商", width: 90, templet: "#ispTpl"},
                {field: "bandwidth", title: "带宽", width: 60},
                {field: "ipaddress", title: "IP地址", width: 125},
                {field: "mask", title: "掩码", width: 125},
                {field: "gateway", title: "网关", width: 125},
                {field: "wan_port", title: "端口", width: 65},
                {field: "remarks", title: "备注"},
                {title: "操作", width: 60, align: "center", fixed: "right", templet: "#operationTpl"}
            ]],
            done: function (res, curr, count) {
                // console.info(res, curr, count);
            }
        });

        // 渲染：adsl表格
        let adslTable = table.render({
            elem: '#adslTable',
            url: "{:url('icafeAdsl/getTableData')}",
            where: {"icafe_id": initData.id},
            limit: 5,
            limits: [5],
            page: true,
            size: "sm",
            cols: [[
                {field: "isp_id", title: "运营商", width: 110, templet: "#ispTpl"},
                {field: "bandwidth", title: "带宽", width: 80},
                {field: "adsl_account", title: "宽带账号", width: 150},
                {field: "adsl_password", title: "宽带密码", width: 150},
                {field: "remarks", title: "备注"},
            ]],
            done: function (res, curr, count) {
                // console.info(res, curr, count);
            }
        });

        // 渲染：净网先锋
        if (null !== initData.icafeCnk) {
            $('#cnk_cnkid').text(initData.icafeCnk.cnkid);
            $('#cnk_checkcode').text(initData.icafeCnk.checkcode);
            $('#cnk_pc_conut').text(initData.icafeCnk.pc_count);
            $('#cnk_legal').text(initData.icafeCnk.legal);
            $('#cnk_incharge').text(initData.icafeCnk.incharge);
            $('#cnk_cellphone').text(initData.icafeCnk.cellphone);
        }

        // 渲染：端口镜像
        if (null !== initData.icafeMirror) {
            $('#mirror_device_ip').text(initData.icafeMirror.device_ip);
            $('#mirror_device_username').text(initData.icafeMirror.device_username);
            $('#mirror_device_password').text(initData.icafeMirror.device_password);
            $('#mirror_source').text(initData.icafeMirror.source);
            $('#mirror_destination').text(initData.icafeMirror.destination);
        }
    });
</script>
<!-- 行工具栏模板 -->
<script type="text/html" id="operationTpl">
    <a href="http://{{d.ipaddress}}:{{d.wan_port}}" title="访问" target="_blank"><i class="layui-icon">&#xe7ae;</i></a>
</script>
<!-- 地区模板 -->
<script type="text/html" id="areaTpl">
    <span>{{d.areaName.provinceName}} / {{d.areaName.cityName}} / {{d.areaName.districtName}}</span>
</script>
<!-- 运营商模板 -->
<script type="text/html" id="ispTpl">
    {{#  if(d.icafeIsp == null) { }}
    <span class="layui-badge layui-btn-disabled layui-btn-xs ibms-btn-xs">未知类型</span>
    {{#  } else if(d.icafeIsp.bgcolor == "") { }}
    <span class="layui-badge layui-btn-primary layui-btn-xs ibms-btn-xs">{{d.icafeIsp.name}}</span>
    {{#  } else { }}
    <span class="layui-badge layui-btn-xs ibms-btn-xs" style="background-color: {{d.icafeIsp.bgcolor}};">{{d.icafeIsp.name}}</span>
    {{#  } }}
</script>
</body>
</html>
